<template>
  <el-dialog :model-value="visible" title="组卷规则设置" width="1200px" center align-center destroy-on-close @close="onClose">
    <el-form ref="formRef" :model="formModel" label-width="80px" @submit.prevent>
      <el-form-item label="乱序设置" prop="derangement">
        <el-switch v-model="formModel.derangement" />
        <span class="tip">开启后系统会根据设置自动生成试卷</span>
      </el-form-item>
      <el-form-item v-if="formModel.derangement" style="margin-left: 30px" label="" prop="questionDerangement">
        <el-checkbox v-model="formModel.questionDerangement" label="题目乱序" :disabled="!formModel.derangement" />
        <span class="tip">每张试卷的题目乱序</span>
      </el-form-item>
      <el-form-item v-if="formModel.derangement" style="margin-left: 30px" label="" prop="optionDerangement">
        <el-checkbox v-model="formModel.optionDerangement" label="选项乱序" :disabled="!formModel.derangement" />
        <span class="tip">每道题目的选项乱序</span>
      </el-form-item>
      <el-form-item label="随机组卷" prop="randomCombine">
        <el-switch v-model="formModel.randomCombine" />
        <span class="tip">开启后系统会根据规则自动生成试卷</span>
      </el-form-item>
      <el-table v-if="formModel.randomCombine" :data="formModel.paperTitles">
        <el-table-column :width="100" label="大题名称" prop="desc">
          <template #default="scope">
            <div>{{ scope.row.titleName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="题目数量设置">
          <template #default="scope">
            <span v-if="scope.row.singleChoiceCountSum > 0">
              <span>单选题</span>
              <el-input-number v-model="scope.row.singleChoiceCount" class="min-number" controls-position="right" :min="0" :max="100" />
              <span>/{{ scope.row.singleChoiceCountSum }}&nbsp;&nbsp;&nbsp;</span>
            </span>
            <span v-if="scope.row.multipleChoiceCountSum > 0">
              <span>多选题</span>
              <el-input-number v-model="scope.row.multipleChoiceCount" class="min-number" controls-position="right" :min="0" :max="100" />
              <span>/{{ scope.row.multipleChoiceCountSum }}&nbsp;&nbsp;&nbsp;</span>
            </span>
            <span v-if="scope.row.judgmentCountSum > 0">
              <span>判断题</span>
              <el-input-number v-model="scope.row.judgmentCount" class="min-number" controls-position="right" :min="0" :max="100" />
              <span>/{{ scope.row.judgmentCountSum }}&nbsp;&nbsp;&nbsp;</span>
            </span>
            <span v-if="scope.row.gapFillingCountSum > 0">
              <span>填空题</span>
              <el-input-number v-model="scope.row.gapFillingCount" class="min-number" controls-position="right" :min="0" :max="100" />
              <span>/{{ scope.row.gapFillingCountSum }}&nbsp;&nbsp;&nbsp;</span>
            </span>
            <span v-if="scope.row.shortAnswerCountSum > 0">
              <span>简答题</span>
              <el-input-number v-model="scope.row.shortAnswerCount" class="min-number" controls-position="right" :min="0" :max="100" />
              <span>/{{ scope.row.shortAnswerCountSum }}&nbsp;&nbsp;&nbsp;</span>
            </span>
            <span v-if="scope.row.materialCountSum > 0">
              <span>材料题</span>
              <el-input-number v-model="scope.row.materialCount" class="min-number" controls-position="right" :min="0" :max="100" />
              <span>/{{ scope.row.materialCountSum }}&nbsp;&nbsp;&nbsp;</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
      <el-button @click="onClose()">取消</el-button>
      <el-button type="primary" @click="onSubmit()">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  import { reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  const emit = defineEmits(['refresh'])
  const formModel = reactive({})

  // 提交
  const onSubmit = async () => {
    if (formModel.derangement) {
      if (!formModel.questionDerangement && !formModel.optionDerangement) {
        ElMessage.warning('请至少选择一种乱序规则')
        return
      }
    } else {
      formModel.questionDerangement = false
      formModel.optionDerangement = false
    }
    emit('refresh', formModel)
    onClose()
  }

  // 打开和关闭
  const visible = ref(false) // 弹窗显示状态
  const onOpen = (item) => {
    if (item) {
      Object.assign(formModel, item)
    }
    visible.value = true
  }
  defineExpose({ onOpen })
  const onClose = () => {
    visible.value = false
    Object.assign(formModel, {})
  }
</script>
<style lang="scss" scoped>
  .total-score {
    float: right;
    width: 150px;
  }
</style>
